<style>
    .jia-529-wrapper {}
    
    .first-block,
    .last-block {
        width: 400px;
        height: 200px;
        border-bottom: 1px solid #ccc;
        background: green;
        cursor: pointer;
        margin: 0 auto 50px;
    }
    
    .tip {
        width: 100px;
        height: 30px;
        border-radius: 10px;
        background-color: red;
        text-align: center;
        line-height: 30px;
        display: none;
        position: absolute;
    }
</style>
<div class="jia-529-wrapper">
    <div class="show-div first-block" data-msg="哈哈哈哈"></div>
    <div class="show-div last-block" data-msg="我想静静"></div>
    <div class="tip"></div>
</div>

<script>
    ! function(window, document, $, undefined) {
        $('.show-div').on('mousemove', function(e) {
            let x = e.pageX;
            let y = e.pageY;
            $('.tip')
                .html($(this).data('msg'))
                .show()
                .css({
                    left: x + 20,
                    top: y + 20
                })
        }).on('mouseleave', function() {
            $('.tip').hide()
        })
    }(window, document, jQuery)
</script>